<template>
    <div id="main">
        <div class="bar">
            <div class="left">
                文章列表
            </div>
            <div class="right">
                <el-button type="success" size="mini"  @click="addArt"> <i class="el-icon-plus"></i> 添加文章</el-button>
            </div>
        </div>
        <div class="search">
            <el-input placeholder="请输入要搜索的文章标题" v-model="arttitle" class="input-with-select">
                
                <el-button slot="append" icon="el-icon-search" @click="searchArt"></el-button>
            </el-input>
        </div>
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                prop="id"
                label="ID"
                align="center"
               >
                </el-table-column>
                <el-table-column
                prop="title"
                align="center"
                label="标题"
                >
                </el-table-column>

                <el-table-column
                prop="classname"
                align="center"
                label="分类"
                >
                </el-table-column>

                <el-table-column
                prop="author"
                align="center"
                label="作者"
                sortable
                >
               
                </el-table-column>

                <el-table-column
                prop="click"
                align="center"
                label="点击量">
                </el-table-column>



                <el-table-column
                prop="intro"
                align="center"
                label="内容">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top" style="width:300px;">
                        <p v-html="scope.row.content"></p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag style="width:100px" size="medium">查看内容</el-tag>
                        </div>
                        </el-popover>
                </template>
                </el-table-column>

              
                
 
                <el-table-column
                prop="status"
                align="center"
                label="状态">
                    <template slot-scope="scope">
                        <el-button :type="scope.row.status == 1 ? 'success': 'danger' " size="mini" @click="changeStatus(scope.row.id)">{{ scope.row.status == 1 ? "开启" : "关闭" }}</el-button>
                    </template>
                </el-table-column>

                <el-table-column
               
                align="center"
                label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editMenu(scope.row.id)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                @current-change="pageChange"
                :total="totalNum">
                </el-pagination>
        </div>

        <!-- dialog -->
        <art-class-dialog :DialogData="DialogData" :FormData="FormData" @update="getAllMember"></art-class-dialog>
    </div>
</template>

<script>
    import ArtClassDialog from "@/components/dialog/ArtClassDialog"
    export default {
        data() {
            return {
                tableData: [],
                DialogData: {
                    title: "",
                    show: false,
                },
                FormData: {},
                arttitle: "",
                currentPage: 1,
                pageSize: 10,
                totalNum: 0,
            }
        },
        components: {
            ArtClassDialog,
        },
        computed: {
            token() {
                return localStorage.token; 
            }
        },
        filters: {
            showArtical: function(value) {
                let reg = /&lt;/g
                let reg1 = /&gt;/g
                let reg2= /&amp;amp;amp;quot;/g
                value = value.replace(reg,"<").replace(reg1,">").replace(reg2, "")
            }
        },
        mounted() {
            this.getAllMember()
        },
        methods: {
            // guolv
            artformat: function(value) {
                let str = ""
                let reg = /&lt;/g
                let reg1 = /&gt;/g
                let reg2= /&amp;amp;amp;quot;/g
                str = value.replace(reg,"<").replace(reg1,">").replace(reg2, '')
                return str
            },
            // 获取所有文章
            async getAllMember( page ) {
                let pagema = page ? page : 1;
                let res = await this.$axios.post("/admin/website/articleshow", { token: this.token, page: pagema })
                 console.log(res);
                if(res.data.code == 200) {
                    this.tableData = res.data.data
                    this.totalNum = this.tableData[0].count
                    this.tableData.forEach(el => {
                        el.content = this.artformat(el.content)
                    })
                }
                
            },
           
            // 菜单状态改变
            async changeStatus( id ) {
                let res = await this.$axios.post("/admin/website/articledisplay", {token: this.token, id })
                //  console.log(res);
                if(res.data.code == 204) {
                    this.$message.success("更新成功")
                    this.getAllMember()
                } else {
                    this.$message.success("更新失败")
                    this.getAllMember()
                }
                
            },
            // 添加文章
            addArt() {
                this.$router.push("/artedit/add")
            },
            // 编辑文章
            editMenu( id ) {
                this.$router.push(`/artedit/${id}`)
            },

            // 搜索文章
            async searchArt() {
                if (this.arttitle) {
                    this.tableData = []
                    let res = await this.$axios.post("/admin/website/articlesou", { title: this.arttitle, token: this.token })
                    // console.log(res);
                    let code = res.data.code
                    if (code == 200) {
                        this.tableData = res.data.data
                    } else {
                        this.$message.error("未搜索到相关文章")
                        this.getAllMember()
                    }
                } else {
                    this.$message.error("请输入搜索标题")
                    return false
                }
            },
            // 页码变化
            pageChange( e ) {
                console.log(e);
                this.getAllMember(e)
            },
        },
    }
</script>

<style lang="scss" scoped>
 #main {
     width: 100%;
     box-sizing: border-box;
     .bar {
         width: 100%;
         font-weight: bold;
         display: flex;
         justify-content: space-between;
         height: 40px;
         line-height: 40px;
         border-bottom: 1px solid #aaa;
     }
     .search {
         padding: 5px 0;
     }
     .page {
         width: 100%;
         text-align: right;
     }
     .table {
         margin-top: 20px;
     }
     .pic {
         width: 40px;
         height: 40px;
         display: block;
     }
 }
 .el-popover {
     width: 300px;
 }
</style>